<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>element-plus</title>
        <!-- 引入Element Plus CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    </head>
    <body>
        <div id="app">
            <!-- 这里使用 el-table 组件 -->
            <div class="mb-4">
                <el-button @click="btnClick">Default</el-button>
                <el-button type="primary">Primary</el-button>
                <el-button type="success">Success</el-button>
                <el-button type="info">Info</el-button>
                <el-button type="warning">Warning</el-button>
                <el-button type="danger">Danger</el-button>
            </div>
            <el-table :data="tableData" stripe style="width: 100%; margin: 30px 0">
                <el-table-column prop="date" label="Date" width="180"></el-table-column>
                <el-table-column prop="name" label="Name" width="180"></el-table-column>
                <el-table-column prop="address" label="Address"></el-table-column>
            </el-table>

            <el-pagination layout="prev, pager, next" :total="50" />
        </div>
        <!-- 引入 Vue 3 -->
        <script src="https://unpkg.com/vue"></script>
        <!-- 引入 Element Plus JS -->
        <script src="https://unpkg.com/element-plus"></script>

        <script>
            const { ElMessage, ElMessageBox } = ElementPlus;
            const app = Vue.createApp({
                data() {
                    return {
                        tableData: [
                            {
                                date: "2016-05-03",
                                name: "Tom",
                                address: "No. 189, Grove St, Los Angeles"
                            },
                            {
                                date: "2016-05-02",
                                name: "Tom",
                                address: "No. 189, Grove St, Los Angeles"
                            },
                            {
                                date: "2016-05-04",
                                name: "Tom",
                                address: "No. 189, Grove St, Los Angeles"
                            },
                            {
                                date: "2016-05-01",
                                name: "Tom",
                                address: "No. 189, Grove St, Los Angeles"
                            }
                        ]
                    };
                },
                methods: {
                    btnClick() {
                        ElMessageBox.confirm("Are you sure to close this dialog?")
                            .then(() => {
                                ElMessage("This is a message.");
                            })
                            .catch(() => {
                                // catch error
                            });
                    }
                }
            });
            app.use(ElementPlus);
            app.mount("#app");
        </script>
    </body>
</html>
